<template>
	<div v-show="now<startTime" style="font-size: 24px;color: red;">
		<span style="color:blue;">距离选导师开始时间还有</span>
		{{d(diffStart)}}天{{h(diffStart)}}时{{m(diffStart)}}分{{s(diffStart)}}秒
	</div>
	<div v-show="(now>=startTime)&&(now<endTime)" style="font-size: 24px;color: red;">
		选导师<span style="color:blue;">结束时间</span>还有
		{{h(diffEnd)}}时{{m(diffEnd)}}分{{s(diffEnd)}}秒
	</div>
	<div v-show="now>endTime" style="font-size: 24px;color: red;">
		选导师时间已经结束
	</div>
	
	<el-input type="text" v-model="keyword" placeholder="输入导师指导方向关键词"></el-input>
	<el-button type="primary" @click="elasticSearch">全文搜索</el-button>	
	<el-table :data="teachers" stripe border >
		<el-table-column type="index" width="60" align="center" :index="indexMethod" label="序号">
		</el-table-column>
		<el-table-column prop="teacherno" width="80" align="center" label="工号">
		</el-table-column>
		<el-table-column prop="teachername" width="120" align="center" label="姓名">
		</el-table-column>
		<el-table-column prop="limitnum" width="120" align="center" label="指导人数">
		</el-table-column>
		<el-table-column prop="memo" width="320" align="center" label="指导方向">
		</el-table-column>
	</el-table>
	<el-pagination :hide-on-single-page="true" background 
		@current-change="currentChange" layout="pager"  :page-count="count"
	</el-pagination>	
	<!--  :total="total" 用该属性有问题-->
	<hr>
	<div style="display: flex;flex-direction: row;" v-show="isSelect&&finish">
		<el-input type="text" v-model="teacher1" 
			placeholder="第1志愿教师工号"></el-input>
		<el-input type="text" v-model="teacher2" 
			placeholder="第2志愿教师工号"></el-input>
		<el-button ref="btn" type="primary" size="large" @click="choiceHandler">提交</el-button>
	</div>
	
	<el-dialog title="导师情况" v-model="showSearch">
		<el-table :data="searchResult" stripe border >
			<el-table-column type="index" width="60" align="center" label="序号">
			</el-table-column>
			<el-table-column prop="teacherno" width="120" align="center" label="学号">
			</el-table-column>
			<el-table-column prop="teachername" width="80"  align="center" label="姓名">
			</el-table-column>
			<el-table-column prop="memo" width="320" label="指导方向">
			   <template #default="scope" >
				   <div v-html="scope.row.memo" ></div>
			   </template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;">
			<el-button style="margin-top: 15px;"  @click="showSearch=false" type="primary">返回</el-button>
		</div>		
	</el-dialog>
</template>

<script>
	import {
		ElTable,
		ElTableColumn,
		ElPagination,
		ElMessageBox
	} from "element-plus"
	export default {
		data() {
			return {
				showSearch:false,
				keyword:"",
				searchResult:[],
				timer:null,
				finish:true,
				now:0,
				startTime:0,
				endTime:0,
				teacher1:"",
				teacher2:"",
				pageNo: 1,
				pageSize: 11,
				count:0,
				total: 0,
				teachers: []
			}
		},
		computed:{
			diffStart(){
				return this.startTime-this.now;
			},
			diffEnd(){
				return this.endTime-this.now;
			},
			isSelect(){
				if((this.now>=this.startTime)&&(this.now<this.endTime))
					return true;
				return false;
			}
		},
		methods: {
			async choiceHandler(){
				if((this.teacher1=="")||(this.teacher2=="")){
					ElMessageBox.alert("请输入导师工号", "提示");
					return;
				}
				const formData = new FormData();
				formData.append("teacher1", this.teacher1);
				formData.append("teacher2", this.teacher2);
				let result = await this.$axios.post("/teacher/choice", formData);
				console.log(result)
				let {code,msg} = result.data;
				if(code==0) {
					clearInterval(this.timer);
					this.timer=null;
					this.finish=false;
					ElMessageBox.alert("提交成功", "提示");
				} else ElMessageBox.alert(msg, "提示");
			},
			timeCount(diff){
				this.now+=1000;
				if(diff<=0){
					if(this.isSelect){
						this.timeCount(this.diffEnd);
					}else{
						clearInterval(this.timer);
						this.timer=null;
					}
				}
			},
			d(diff){
				if(diff>0)
					return Math.floor(diff/1000/60/60/24);
			},
			h(diff){
				if(diff>0)
					return Math.floor(diff/1000/60/60%24);
			},
			m(diff){
				if(diff>0)
					return Math.floor(diff/1000/60%60);
			},
			s(diff){
				if(diff>0)
					return Math.floor(diff/1000%60);
			},
			indexMethod(index) {
				return (this.pageNo - 1) * this.pageSize + index + 1;
			},
			currentChange(e) {
				this.pageNo = e;
				this.getTeachers();
			},
			async getTeachers() {
				try {
					let result = await this.$axios("/teacher/list", {
						params: {
							pageNo: this.pageNo,
							pageSize: this.pageSize
						}
					})
					if (result.data.code == 0) {
						this.teachers = result.data.data;
						this.total = result.data.count;
						this.count=Math.ceil(this.total / this.pageSize);						
						console.log(this.total)
					} else ElMessageBox.alert(result.data.msg, "提示");
				} catch (e) {
					console.log(e);
				}
			},
			async getSysConfig(){
				let result = await this.$axios("/teacher/duration");
				if(result.data.code==0){
					this.now=result.data.data.nowTime;
					this.startTime=result.data.data.starttime;
					this.endTime=this.startTime+result.data.data.duration*60*60*1000;
					if(this.now<this.endTime) this.getTeachers();
					if((this.now>=this.startTime)&&(this.now<this.endTime)){
						this.timer=setInterval(()=>{
							this.timeCount(this.diffEnd);
						},1000)
					}
					if(this.now<this.startTime){						
						this.timer=setInterval(()=>{
							this.timeCount(this.diffStart);
						},1000)
					}	
				}else{
					ElMessageBox.alert(result.data.msg, "提示");
					this.isSelect=false;
				} 					
			},
			async elasticSearch(){
				if(this.keyword==""){
					ElMessageBox.alert("请输入搜索的关键词", "提示");
					return;
				}
				let result=await this.$axios("/elastic/search",{
					params: {
						keyword: this.keyword
					}
				});
				let { code, msg, data } = result.data;
				console.log(code)
				if(code==0){
					console.log(".....")
					this.showSearch=true;
					this.searchResult=data;
				} 
				
			}
		},
		mounted() {
			this.getSysConfig();
		}
	}
</script>

<style scoped>
	.el-input{
		width: 240px;
		font-size: 18px;
		border-radius: 2px solid red;
	}
	.el-button{
		font-size:24px;
	}
</style>